<template>
  <div class="wrap">
    <section>
      <div id="Tag1" class="box BoxHide">
        <ul class="title">
          <li class="product action">产品更新</li>
          <li class="product">产品公告</li>
        </ul>
        <div class="tag">
          <ul class="content show">
            <li>知了工资条更新啦<span class="time fr">2020-05-01</span></li>
          </ul>
          <ul class="notice">
            <li>
              <div class="img">
                <img src="images/about.png" alt="">
              </div>
              <h5>暂无公告</h5>
              <p>除了要你更好，暂无要紧的事情了~^o^~</p>
            </li>
          </ul>
        </div>
      </div>
      <div id="Tag2" class="box">
        <p class="tagTitle">
          <span><img src="images/returns.png" alt=""></span>
          <span>产品更新</span>
        <div class="clear"></div>
        </p>
        <div class="update-box">
          <p class="updateTitle">蚂蚁工资条产品更新</p>
          <p class="updateTime">发布时间 : 2019-12-12</p>
          <h5>蚂蚁工资条更新功能：</h5>
          <p class="title1">1、上传表格时，选择薪资类型；</p>
          <img src="images/update1.png" alt="">
          <p class="title1">2、提供不含月份的特殊发薪类型；</p>
          <img src="images/update.png" alt="">
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
  .wrap {
    width: 100%;
    height: 100%;
    overflow: hidden
  }

  section {
    width: 100%;
    height: 100%;
    padding: 5% 5%;
    height: 100%;
    font-size: .89rem
  }

  section .box {
    display: none;
    width: 80%;
    height: 32rem;
    margin-left: 10%;
    background-color: #fff;
    padding: 1.11rem;
    overflow-y: auto
  }

  section .box .title {
    height: 2.78rem;
    border-bottom: 1px solid #dcdfe6
  }

  section .box .title li {
    width: 5.56rem;
    float: left;
    line-height: 2.78rem;
    text-align: center
  }

  section .box .title .action {
    border-bottom: 2px solid #34ad37;
    color: #34ad37
  }

  section .content {
    width: 100%;
    height: 100%;
    margin-top: .56rem
  }

  section .content li {
    width: 100%;
    height: 2.78rem;
    line-height: 2.78rem;
    text-indent: 1em
  }

  section .content li .time {
    font-size: .78rem
  }

  section .content .action {
    background-color: #34ad37;
    color: #fff
  }

  section .tag ul {
    display: none;
    width: 100%;
    height: 100%;
    margin-top: .56rem
  }

  section .tag .show {
    display: block
  }

  section .tag .notice .img {
    width: 24.11rem;
    margin: 0 auto
  }

  section .tag .notice h5 {
    text-align: center
  }

  section .tag .notice p {
    color: #c0c4c8;
    font-size: .78rem;
    text-align: center
  }

  section .BoxHide {
    display: block
  }

  #Tag2 .tagTitle {
    height: 2.78rem;
    width: 100%;
    border-bottom: 1px solid #dcdfe6
  }

  #Tag2 .tagTitle span {
    line-height: 2.78rem;
    display: block;
    float: left
  }

  #Tag2 .tagTitle span img {
    width: .89rem;
    height: .89rem;
    margin: 1rem .56rem 0 0
  }

  #Tag2 .updateTitle {
    text-align: center;
    line-height: 2.44rem
  }

  #Tag2 .update-box {
    width: 96%;
    height: 96%;
    padding: 2%
  }

  #Tag2 .updateTime {
    text-align: center;
    color: #909399
  }

  #Tag2 .update-box h5 {
    font-size: .89rem;
    color: #434343;
    font-weight: 700;
    margin-top: 1.67rem
  }

  #Tag2 .update-box img {
    width: 100%;
    height: 100%
  }
</style>
